<template>
  <view class="table-group">
    <view class="group__header">
      <view class="group__header-left">
        <text class="group-name">{{ data.name }}</text>
        <text class="table-num">（{{ tables.length }}）</text>
        <uni-icons type="compose" size="20" color="#999999" class="edit-btn" @click="openGroupModity"></uni-icons>
      </view>
      <view class="group__header-right">
        <TButton @click.native="handleClickDeleteGroup">删除区域</TButton>
      </view>
    </view>
    <view class="group__body">
      <!-- 桌台 -->
      <TableCard v-for="(item) in tables" :key="item.id" :data="item" @click.native="gotoTableInfo(item)" />
      <!-- 添加按钮 -->
      <TableCard type="button" @click.native="handleClickNewTable" />
      <!-- 占位 -->
      <TableCard type="empty" />
    </view>
    <InputDialog ref="inputDialog" title="区域名" @submit="upDateGroup" />
  </view>
</template>

<script>
import TButton from "@/components/public/Button/TButton.vue";
import TableCard from "./TableCard.vue";
import InputDialog from "@/components/public/Dialog/InputDialog.vue";
import { Throttle, Debounce } from "../../../utils/index";
import { mapActions } from "vuex";
export default {
  components: { TButton, TableCard, InputDialog },
  props: {
    data: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      defaultData: {
        tableNo: null,
        capacity: null,
        tablePay: null,
        groupId: null,
        desc: null
      }
    };
  },
  computed: {
    tables() {
      return this.data.tables || [];
    }
  },
  methods: {
    ...mapActions({
      postTables: "postTables",
      deleteTableGroups: "deleteTableGroups",
      putTableGroups: "putTableGroups"
    }),
    handleClickNewTable: Debounce(function() {
      uni.showLoading();
      let tableNum = this.tables.length;
      let form = this.defaultData;
      let no = tableNum + 1;
      form.tableNo = no < 10 ? `0${no}桌` : `${no}桌`;
      form.groupId = this.data.id;
      form.capacity = tableNum == 0 ? 4 : this.tables[tableNum - 1].capacity;
      this.postTables(form)
        .then(res => {})
        .finally(res => {
          uni.hideLoading();
        });
    }, 500),
    handleClickDeleteGroup() {
      uni.showModal({
        title: "提示",
        content: "确认删除该区域？",
        success: res => {
          if (res.confirm) {
            this.deleteTableGroups(this.data.id).then(res => {
              if (res.code) {
                uni.showToast({
                  title: res.errMsg,
                  icon: "none"
                });
              }
            });
          }
        }
      });
    },
    // 打开编辑区域名弹框
    openGroupModity() {
      this.$refs.inputDialog.open(this.data.name);
    },
    upDateGroup: Debounce(function(value) {
      let form = {
        name: value,
        id: this.data.id
      };
      this.putTableGroups(form).then(res => {
        // console.log(res);
      });
    }, 500),
    gotoTableInfo(item) {
      this.$store.commit("SET_TABLE_INFO", item);
      this.$goto("tableInfo", { id: item.id });
    }
  }
};
</script>

<style scoped lang="scss">
$paddingLeft: 30rpx;
.table-group {
  background-color: #ffffff;
  overflow: hidden;
  border-radius: 16rpx;
  padding: 0 $paddingLeft;
  margin-bottom: 30rpx;
  .group__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15rpx 0;
    .group__header-left {
      display: flex;
      .group-name {
      }
      .table-num {
        color: $uni-text-color-grey;
      }
      .edit-btn {
        color: $uni-text-color-grey;
      }
    }
    .group__header-right {
      display: flex;
    }
  }

  .group__body {
    padding: 20rpx 0;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }
}
</style>
